

function draw(){
    world.Step(1/60, 10, 10);
    world.DrawDebugData();
    world.ClearForces();
    context.fillStyle = '#cccccc';
    context.fillRect(0, 0, 500, 500);
    context.strokeRect(0, 0, 500, 500);
    for (var i = 0; i < balls.length; i++) {
        var position = balls[i].GetPosition();
        var fixtrueList = balls[i].GetFixtureList();
        var shape = fixtrueList.GetShape();
        context.fillStyle = '#000000';
        context.beginPath();
        context.arc(position.x * scaleFactor, position.y * scaleFactor, shape.GetRadius() * scaleFactor, 0, Math.PI * 2, true);
        context.closePath();
        context.fill();

    }
}

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// 第二个canvas
var canvasBox2dDebug = document.getElementById('box2d-debug');
var context2 = canvasBox2dDebug.getContext('2d');

// 定义box2dAPI
var b2Vec2 = Box2D.Common.Math.b2Vec2,
b2BodyDef = Box2D.Dynamics.b2BodyDef,
b2Body = Box2D.Dynamics.b2Body,
b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
b2Word = Box2D.Dynamics.b2World,
b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape,
b2CircleShape = Box2D.Collision.Shapes.b2CircleShape,
b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
// 世界
var world = null;
// 定义球
var numBalls = null, balls = [];
// 墙体
var wallDefs = null, walls = [];
// canvas和box2d之间的转换比例
var scaleFactor = 30;


(function(){
    // 世界，b2V2c2里定义重力（x轴或y轴）
    world = new b2Word(new b2Vec2(0, 10), true);
    // 墙体
    wallDefs = [
        {
            x: canvas.width, y:0, w: canvas.width, h:1
        },
        {
            x: canvas.width, y:canvas.height, w:canvas.width, h:1
        },
        {
            x: 0, y:canvas.height, w:1, h:canvas.height
        },
        {
            x: canvas.width, y: canvas.height, w:1, h: canvas.height
        }

    ];
    for (var i = 0; i < wallDefs.length; i++) {
        // b2BodyDef 用来定义一个刚体
        var wallDef = new b2BodyDef;
        // 定义刚体的类型，staticbody为静态的，不会动的。
        wallDef.type = b2Body.b2_staticBody;
        // 定义位置
        wallDef.position.Set(wallDefs[i].x / scaleFactor, wallDefs[i].y /scaleFactor);
        var newWall = world.CreateBody(wallDef);
        // fixture定义刚体的形状
        var wallFixtrue = new b2FixtureDef;
        // 质量
        wallFixtrue.density = 10.0;
        // 阻力（0-1）
        wallFixtrue.friction = 1;
        // 弹性（0-1）
        wallFixtrue.restitution = 1;
        wallFixtrue.shape = new b2PolygonShape;
        wallFixtrue.shape.SetAsBox(wallDefs[i].w / scaleFactor, wallDefs[i].h / scaleFactor);
        newWall.CreateFixture(wallFixtrue);
        walls.push(newWall);
    }


    numBalls = 30;
    for(var i = 0; i < numBalls; i++) {
        var ballDef = new b2BodyDef;
        ballDef.type = b2Body.b2_dynamicBody;
        var xpos = (Math.random() * canvasBox2dDebug.width) / scaleFactor;
        var ypos = (Math.random() * canvasBox2dDebug.height) / scaleFactor;
        var size = ((Math.random() * 20) + 5) / scaleFactor;
        ballDef.position.Set(xpos, ypos);
        var ballFixture = new b2FixtureDef;
        ballFixture.density = 10.0;
        ballFixture.friction = 0.5;
        ballFixture.restitution = 1;
        ballFixture.shape = new b2CircleShape(size);
        var newBall = world.CreateBody(ballDef);
        var xVelocity = Math.floor(Math.random() * 10) -5;
        var yVelocity = Math.floor(Math.random() * 10) -5;
        newBall.SetLinearVelocity(new b2Vec2(xVelocity, yVelocity));
        newBall.CreateFixture(ballFixture);
        balls.push(newBall);
    }



    var debugDraw = new b2DebugDraw();
    // 在第二个画布上输出调试图像
    debugDraw.SetSprite(context2);
    debugDraw.SetDrawScale(scaleFactor);
    debugDraw.SetFillAlpha(0.3);
    debugDraw.SetLineThickness(1.0);
    debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
    world.SetDebugDraw(debugDraw);

    window.setInterval("draw()",10);
    // draw();
})();